<template>
  <div class="nav">
      <div class="left">
          <img src="../assets/logo.png" alt="">
      </div>
      <div class="right">
          <div v-if="isLogin">
            <span>风控主管：<span v-text="username"></span></span>
            <button v-text="signOut"></button>
          </div>
          <div v-else>
              <button v-text="login"></button>
          </div>
          
      </div>
  </div>
</template>

<script>
export default {
  name: 'navBar',
  data () {
    return {
      isLogin:false,
      signOut:'退出',
      login:'请登录',
      username:''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background: #104aa0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        position: fixed;
        z-index: 100;
    }

    .nav .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        margin-left: 25px;
    }

    .nav .left img {
        display: block;
    }

    .nav .right {
        margin-right: 20px;
        color: #e6e9ed;
    }

    .nav .right button {
        background: none;
        border: none;
        color: #72abff;
        cursor: pointer;
    }

    
</style>
